<template>
  <div class="chart"></div>
</template>

<script setup name="GaugeChart">
// 仪表盘
import * as echarts from 'echarts'
import useResize from '@/components/Charts/hooks/useResize.js'
import { echartsColors } from '@/components/Charts/style.js'

const { proxy } = getCurrentInstance()
const props = defineProps({
  options: {
    type: Object,
    default: () => {
      return {
        title: '室内空气质量',
        status: '室内空气质量',
        value: 58,
        color: '#017CFF'
      }
    }
  }
})

let chartInstance = null

function chartInit() {
  chartInstance = echarts.init(proxy.$el)

  chartInstance.setOption({
    series: [
      {
        center: ['50%', '58%'], // 默认全局居中
        type: 'gauge',
        startAngle: 180,
        endAngle: 0,
        min: 0,
        max: 1,
        splitNumber: 8,
        axisLine: {
          lineStyle: {
            width: 1,
            color: [
              [0.25, '#FF7F24'],
              [0.5, '#FFD700'],
              [0.75, '#5EBDFF'],
              [1, '#31D2A9']
            ]
          }
        },
        pointer: {
          icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
          length: '62%',
          width: 5,
          offsetCenter: [0, '-60%'],
          itemStyle: {
            color: 'inherit'
          }
        },
        axisTick: {
          length: 12,
          lineStyle: {
            color: 'inherit',
            width: 2
          }
        },
        splitLine: {
          length: 10,
          lineStyle: {
            color: 'auto',
            width: 3
          }
        },
        axisLabel: {
          // 显示刻度
          color: '#000',
          fontSize: 12,
          distance: -32,
          formatter: function (value) {
            if (value === 0.875) return '优'

            if (value === 0.625) return '中'

            if (value === 0.375) return '良'

            if (value === 0.125) return '差'
          }
        },
        title: {
          offsetCenter: [0, '80%'],
          fontSize: 16,
          color: '#343434'
        },
        detail: {
          fontSize: 16,
          offsetCenter: [0, '45%'],
          valueAnimation: true,
          formatter: function (value) {
            return Math.round(value * 100) + '分'
          },
          color: 'inherit'
        },
        data: [
          {
            value: 0.7,
            name: proxy.options.title
          }
        ]
      }
    ]
  })
}

onMounted(() => {
  chartInit()
})
// 销毁
onBeforeUnmount(() => {
  chartInstance?.dispose()
})
watch(
  () => props.options,
  () => {
    nextTick(() => {
      chartInit()
    })
  }
)

function resize() {
  chartInstance.resize()
}

useResize(() => {
  resize()
})
</script>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
